<template>
  <!-- 左侧 -->
  <div class="nav" :class="isCollapse?'nav-w1':'nav-w'">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#0d2439"
          text-color="#fff"
          active-text-color="#69B3FF"
          :router="true"
          :collapse="isCollapse"
        >
          <el-submenu
            v-for="item in routes"
            :key="item.path"
            :index="item.path"
            v-show="item.meta.type == type || type == '1'"
          >
            <template slot="title">
              <i class="iconfont " :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
              <el-menu-item v-for="i in item.children"
              :index="item.path + '/' + i.path"
              :key="item.path + '/' + i.path">{{ i.meta.title }}</el-menu-item> 
          </el-submenu>
          <!-- <el-submenu index="2">
                <template slot="title">
                  <i class="iconfont icon-luyouqi"></i>
                  <span>设备</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/devive/gateway">网关列表</el-menu-item>
                  <el-menu-item index="/devive/developKit">设备群组</el-menu-item>
                  <el-menu-item index="/devive/sensor">传感器列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="iconfont icon-fyxx"></i>
                  <span>计费</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/fee/accountJ">账号信息</el-menu-item>
                  <el-menu-item index="/fee/recharge">充值记录</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="iconfont icon-signal"></i>
                  <span>测量类型</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/measurement/add">添加测量类型</el-menu-item>
                  <el-menu-item index="/measurement/index">测量类型列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="iconfont icon-anquan"></i>
                  <span>安全</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/security/secretKey">添加密钥</el-menu-item>
                  <el-menu-item index="/security/list">密钥列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="iconfont icon-account"></i>
                  <span>账号</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/account/addAccount">添加账号</el-menu-item>
                  <el-menu-item index="/account/accountList">账号列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu> -->
        </el-menu>
         <span
          class="iconfont zhedieBtn"
          :class="{
            'icon-foldLeft': !isCollapse,
            'icon-foldRight': isCollapse,
          }"
          @click.stop="isCollapse = !isCollapse"></span>
  </div>
</template>

<script>
//引入 vuex 工具方法
import {mapGetters}  from 'vuex';
export default {
  name: "Sidebar",
  data() {
    return {
      routes: [],
      isCollapse:!true,
    };
  },
  computed:{
    ...mapGetters(["type"]),
  },
  created() {
    //获取路由数据，重组，保存到 本地变量
    let routes = [];
    this.$router.options.routes.forEach((item) => {
      if (item.meta ) {
        routes.push(item);
      }
    });
    this.routes = routes;
  },
};
</script>

<style scoped lang="less">
.el-menu{
  border-right: none;
}
.nav {
  height: 100%;
  background: #0d2439;

}
.nav-w{
  width: 167px;
}
.nav-w1{
  width: 64px;
}
.iconfont {
  font-size: 18px;
  padding: 0 5px;
}
.el-col-12 {
  width: 167px;
}
.el-submenu .el-menu-item {
  min-width: 166px;
}
.zhedieBtn{
  color: #fff;
  position: fixed ;
  left: 15px;
}
</style>
